<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        (function () {
            //请求访问网站
            const API_URL = "http://171.220.242.237:3001/artist/list"
            //1.声明一个httprequest请求
            var httpReuqest = new XMLHttpRequest();
            //2.调用onreadystatechange属性
            httpReuqest.onreadystatechange = function () {
                //服务器端响应的代码
                if (httpReuqest.readyState === XMLHttpRequest.DONE) {
                    //请求已完成并且响应已准备好，查看响应状态码
                    if (httpReuqest.status === 200) {
                        //完美，响应成功
                        var obj = JSON.parse(httpReuqest.responseText);
                        console.log(obj);
                        var ele_u1 = document.createElement("ul");//创建一个lu元素
                        var arr_artists = obj.artists;//获取歌手列表信息
                        for (let i = 0; i < arr_artists.length; i++) {

                            const element = arr_artists[i];
                            // console.log(element.name);
                            var ele_li = document.createElement("li");
                            var ele_img = document.createElement("img");
                            ele_li.innerHTML = element.name;
                            ele_u1.appendChild(ele_li);
                        }
                        document.body.appendChild(ele_u1);
                    } else if (httpReuqest.status === 404) {

                        alert("Not Found");
                    } else if (httpReuqest.status === 500) {
                        alert("Internal Server Error");
                    } else {
                        alert("其他问题");
                    }

                }
            }
            //3.打开一个请求
            httpReuqest.open("GET", API_URL);
            //4.发送请求
            httpReuqest.send();
        })();
    </script>


</body>

</html>